<template>
  <div>
    <el-container>
      <el-main class="article-list">
        <el-row>
          <el-col :span="24">
            <el-col :span="4">
              <el-select v-model="value" placeholder="最新文章" size="small">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="20" class="refresh">
              <el-tooltip
                class="item"
                effect="dark"
                content="刷新"
                placement="bottom"
              >
                <button class="freshButton" @click="freshButton">
                  <i class="el-icon-refresh"></i>
                </button>
              </el-tooltip>
            </el-col>
          </el-col>
        </el-row>
        <el-row class="item-article">
          <el-col :span="24">
            <div
              v-loading="loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
            >
              <ul>
                <li
                  @click="goToArticleDetail(item._id)"
                  v-for="item in AllArticles"
                  :key="item._id"
                >
                  <el-col :span="18">
                    <div>
                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="('xiaowu发布' + item.addTime) | dateFormatter"
                        placement="top-start"
                      >
                        <img src="../../assets/logo.png" alt="" />
                      </el-tooltip>
                      <span class="title">{{ item.title }}</span>
                    </div>
                    <div class="article">
                      <p class="article-info">
                        {{ item.introduce }}
                      </p>
                    </div>
                  </el-col>
                  <el-col :span="6" class="icon-info">
                    <el-button size="mini" type="info">{{
                      item.category
                    }}</el-button>
                    <span><i class="el-icon-chat-round"></i></span>
                    <span>15</span>
                  </el-col>
                </li>
              </ul>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "最新文章",
          label: "最新文章",
        },
        {
          value: "热门文章",
          label: "热门文章",
        },
        {
          value: "新鲜出炉",
          label: "新鲜出炉",
        },
        {
          value: "陈年旧闻",
          label: "陈年旧闻",
        },
      ],
      value: "",
      AllArticles: [],
      cate: this.$route.params.id,
      loading: false,
    };
  },
  created() {
    this.getArticles();
  },
  watch: {
    $route() {
      this.getArticles();
    },
    AllArticles() {
      console.log(this.AllArticles);
    },
  },
  methods: {
    goToArticleDetail(id) {
      this.$router.push("/article/" + id);
    },
    getArticles() {
      let cate = this.$route.params.id;
      console.log(cate);
      this.loading = true;
      this.$axios({
        method: "post",
        url: "/getArticleCateogry",
        data: {
          category: cate,
        },
      }).then((res) => {
        console.log(res.data.data);
        this.AllArticles = res.data.data;
        this.loading = false;
      });
    },
    async freshButton(e) {
      console.log(e.target.classList);
      e.target.classList.add("turn");
      await this.getArticles();
      this.$message.success("刷新成功");
    },
  },
  filters: {
    dateFormatter(time) {
      let date = time.substring(0, 18);
      return date;
    },
  },
};
</script>

<style lang="less">
@keyframes turn {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.article-list {
  padding: 10px;
  padding-left: 40px;
  .refresh {
    text-align: right;
    .freshButton {
      display: inline-block;
      height: 32px;
      width: 32px;
      cursor: pointer;
      background: #e6ecf4;
      border: none;
      i.turn {
        animation: turn 1s linear 2;
      }
    }
  }
  .item-article {
    padding: 10px 0;
    img {
      width: 30px;
      border-radius: 50%;
      display: inline-block;
    }
    ul {
      li {
        padding: 20px;
        list-style: none;
        border-radius: 5px;
        cursor: pointer;
        display: inline-block;
        &:hover {
          background: #e9e6f4;
        }
        .title {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 20px;
        }
        .article {
          margin-top: 10px;
          padding-left: 30px;
          .article-info {
            white-space: normal;
            font-size: 12px;
            line-height: 1.5em;
            color: #b1b1b2;
            display: block;
            word-break: break-word;
          }
        }
      }
    }
    .icon-info {
      padding: 10px;
      text-align: right;
      span {
        padding-left: 10px;
      }
    }
  }
}
</style>
